:root{
      --bg-dark-1: #071033;
      --bg-dark-2: #0a1f4a;
      --accent: #0ea5e9;
      --muted: #9aa6bd;
      --glass: rgba(255,255,255,0.04);
    }
    
        /* === Top Navigation === */
    .topbar {
      border-bottom: 1px solid rgba(15,23,42,0.06);
      padding: 16px 0;
    }

    .logo {
      font-weight: 700;
      color: var(--primary-blue);
      display: flex;
      align-items: center;
      gap: .6rem;
    }

    .logo img {
      height: 36px;
    }

  

/* subtle parallax shimmer within the text */
@keyframes stencilMove {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}


 

   
.service-card {
  border-radius: 12px;
  padding: 1.25rem;
  background: #ffffff;
  border: 1px solid rgba(11, 19, 32, 0.03);
  transition: all 0.4s ease;
  text-align: center;
  color: #0b1320; /* dark text initially */
}

/* Icon inside card (optional if used) */
.service-card i {
  font-size: 2.5rem;
  color: #0b3b91;
  margin-bottom: 0.75rem;
  transition: all 0.4s ease;
}

/* Hover state */
.service-card:hover {
  transform: translateY(-8px) scale(1.03);
  background: linear-gradient(145deg, #0a1a3f, #0b3b91); /* dark blue gradient */
  box-shadow: 0 18px 40px rgba(11, 19, 32, 0.25);
  border-color: transparent;
  color: #ffffff; /* text becomes white */
}

/* Hover icon effect */
.service-card:hover i {
  color: #ffffff;
  transform: scale(1.15);
}

/* Optional: soft futuristic glow for text */
.service-card:hover h4,
.service-card:hover p {
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
}

    .timeline { position: relative; padding-left: 1rem; }
    .timeline::before {
      content:""; position:absolute; left:20px; top:0; bottom:0; width:3px;
      background: linear-gradient(180deg,var(--accent), #1e3a8a); border-radius:4px; opacity:.85;
    }
    .timeline-item { position: relative; margin: 1.5rem 0; padding-left: 48px; }
    .timeline-item::before {
      content:""; position:absolute; left:6px; top:6px; width:24px; height:24px; border-radius:50%;
      background:#fff; box-shadow: 0 6px 18px rgba(14,165,233,0.12); border:3px solid var(--accent);
    }

    .team-card { border-radius: 12px; overflow:hidden; transition: transform .28s ease; background:linear-gradient(180deg,#fff,#fbfdff); }
    .team-card:hover{ transform: translateY(-6px); }

    .stat {
      background: linear-gradient(90deg, rgba(14,165,233,0.06), rgba(30,58,138,0.03));
      padding: .9rem; border-radius: 10px; text-align:center;
    }

    /* CTA */
    .cta {
      background: linear-gradient(90deg,#071033,#072a65 60%, #051b39);
      color: #fff; border-radius: 12px; padding: 2rem;
      box-shadow: 0 30px 80px rgba(7,16,51,0.45);
    }

    /* helper text colors */
    .muted { color: var(--muted); }
    .accent { color: var(--accent); }

    /* reveal animation initial state */
    .reveal { opacity: 0; transform: translateY(18px); }

    @media (max-width: 991px){
      .hero { padding: 3.5rem 0 2rem; }
      .hero-img { max-height: 300px; }
    }

    @media (prefers-reduced-motion: reduce){
      * { transition: none !important; animation: none !important; }
    }